<template>
  <div class="wating-for-deliver">
    <el-header height="auto">
      <m-search
        ref="SearchFormSP"
        label-width="66px"
        :data="indexSearchData"
        :submit-loading="submitLoading"
        @searchForm="searchForm"
        @resetForm="resetForm"
      />
      <slot :currentSelect="currentSelect" />
    </el-header>
    <m-editable
      ref="multipleTable"
      v-loading="tableLoading"
      style="margin: 0 20px"
      :empty-type="resultType"
      :data="dataList"
      height="400"
      :style="{ height: 400 + 'px' }"
      :columns="columnsTable"
      :row-key="(row) => row.tpInvoiceId"
      @selection-change="handleSelectionChange"
    />
    <el-pagination
      v-show="paging"
      class="pageBox"
      align="right"
      style="margin-top: 10px"
      :current-page="page.curPage"
      :page-sizes="PAGE_NUMBER"
      :page-size="page.size"
      :layout="PAGINATION_LAYOUT"
      :total="page.total"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
/* eslint-disable */

import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import { toSentinvoice } from '@api/hossyn-order-center';

export default {
  name: 'WatingForDeliver',
  data() {
    return {
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      resultType: 0,
      tableLoading: false,
      columnsTable: [
        {
          width: '40',
          fixed: 'left',
          type: 'selection',
          selectable(row) {
            return row.canCheck;
          },
        },
        {
          type: 'index',
          label: '序号',
          width: 100,
          align: 'center',
        },
        {
          prop: 'invoiceNumber',
          label: '发票号',
          width: 100,
          'show-overflow-tooltip': true,
        },
        {
          prop: 'customerName',
          label: '客户名',
          width: 270,
          'show-overflow-tooltip': true,
          align: 'center',
        },
        {
          prop: 'pCompanyName',
          label: '配送商',
          minWidth: 170,
          align: 'center',
          'show-overflow-tooltip': true,
        },
        {
          prop: 'applicationAmount',
          label: '含税金额',
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'applicationNoTaxAmount',
          label: '不含税金额',
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'applicationTaxAmount',
          label: '税额',
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'relationSettleOrder',
          label: '关联结算单',
          minWidth: 170,
          align: 'center',
          'show-overflow-tooltip': true,
        },
        {
          prop: 'nums',
          label: '物料种类数量',
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'bilingDate',
          label: '开票时间',
          minWidth: 120,
          align: 'center',
        },

        // {
        //   prop: 'action',
        //   label: '操作',
        //   width: 180,
        //   fixed: 'right',
        //   align: "center"
        // }
      ],
      page: {
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0,
      },
      paging: true,
      searchData: {},
      dataList: [],
      indexSearchData: [
        {
          key: 'invoiceNumber',
          title: '发票号',
          type: 'input',
          attr: {
            placeholder: '请输入',
          },
        },
        {
          key: 'customerName',
          title: '客户名称',
          type: 'input',
          attr: {
            placeholder: '请输入',
          },
        },
        {
          key: 'settleOrderCode',
          title: '结算单号',
          type: 'input',
          attr: {
            placeholder: '请输入',
          },
        },
        {
          key: 'billingDate', // 在一起的日期起始时间
          title: '开票日期',
          type: 'time',
          fieldname: ['billingDateStartTime', 'billingDateEndTime'],
          attr: {
            type: 'daterange',
            style: 'width:260px',
            'start-placeholder': '结算开始日期',
            'end-placeholder': '结算结束日期',
            'default-time': ['00:00:00', '23:59:59'],
          },
        },
      ],
      submitLoading: false,
      currentSelect: '',
    };
  },
  watch: {
    page: {
      deep: true,
      handler() {
        this.getList();
      },
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索功能-点击查询
    searchForm(condition) {
      this.page.curPage = 1;
      this.searchData = condition;
      this.getList();
    },
    resetForm(condition) {
      this.page.curPage = 1;
      this.searchData = condition;
      this.getList();
    },
    toDetails(row) {
      this.$router.push({
        path: '/distributorSide/invoiceManagement/details',
        query: {
          giveApplyId: row.giveApplyId,
        },
      });
    },
    handleCurrentChange(val) {
      this.currentSelect = val;
    },
    handleSelectionChange(val) {
      console.log(val);
      if (val.length) {
        this.dataList.map((item) => {
          if (val[0].customerCode !== item.customerCode) {
            item.canCheck = false;
          }
        });
        this.currentSelect = val;
      } else {
        this.dataList.map((item) => {
          item.canCheck = true;
        });
        this.currentSelect = '';
      }
    },
    async getList() {
      const { data } = await this.$axios({
        url: toSentinvoice,
        method: 'post',
        data: {
          ...this.searchData,
          page: this.page.curPage,
          pageSize: this.page.pageSize,
        },
      });

      if (data.payload.content.length) {
        data.payload.content.map((item) => {
          item.canCheck = true;
        });
      }
      this.dataList = data.payload.content || [];
      this.page.total = data.payload.totalElements;
      if (this.page.total === 0) {
        this.paging = false;
      }
    },
    // 切换不一样的页面,重置一切数据
    pageChange(curPage) {
      this.page.curPage = curPage;
    },
    // 页码更改
    sizeChange(size) {
      this.page.pageSize = size;
    },
  },
};
</script>

<style lang="less" scoped>
.wating-for-deliver {
  width: 100%;
}
</style>
